<template>
	<hx-navbar title="个人信息"></hx-navbar>
	<view class="setting-container">
		<view class="setting-warp">
			<view class="setting-content">
				<u-form :model="form" ref="formRef" label-width="140">
					<u-form-item label="昵称" prop="nickName"><u-input input-align="right" placeholder="请输入昵称" v-model="form.nickName" /></u-form-item>
					<u-form-item label="手机号" prop="phone"><u-input input-align="right" v-model="form.phone" @click="phoneShow = true" /></u-form-item>
					<u-form-item label="头像" prop="avatarUrl">
						<template v-slot:right>
							<hx-upload v-model="form.avatarUrl" width="120" height="120" maxCount="1"></hx-upload>
						</template>
					</u-form-item>
					<u-form-item label="性别" prop="sex">
						<u-input v-model="sexObj.current.label" input-align="right" type="select" placeholder="请选择性别" @click="sexObj.show = true" />
					</u-form-item>
				</u-form>
			</view>
		</view>

		<u-button class="u-margin-top-20" type="primary" shape="circle" @click="edit">确认修改</u-button>
		<u-button class="u-margin-top-20" shape="circle" @click="logout">退出登录</u-button>
	</view>
	<!-- 性别选择器 -->
	<u-select v-model="sexObj.show" :list="sexObj.list" @confirm="onSex"></u-select>
	<!-- 手机号修改弹窗 -->
	<u-popup v-model="phoneShow" mode="center" closeable>
		<view class="content phone-popup">
			<u-field v-model="phoneForm.phone" label="手机号" placeholder="请输入手机号"> </u-field>
			<u-field v-model="phoneForm.code" label="验证码" :maxlength="4" placeholder="请输入验证码">
				<template v-slot:right>
					<u-button size="mini" type="success" @click="getCode">{{ codeText }}</u-button>
				</template>
			</u-field>
			<view class="u-padding-top-20">
				<u-button type="primary" shape="circle" @click="submit">提 交</u-button>
			</view>
		</view>
	</u-popup>
	<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useUserStore } from '@/stores/user';
import { editObj, editPhone } from '@/api/user/user';
import { Local } from '@/utils/storage';
import HxUpload from '@/components/hx-upload/index.vue';
import { sendSmsCode } from '@/api/login';
const storesUserStore = useUserStore();
const formRef = ref();
onShow(() => {
	const user = Local.get('userInfo');
	form.value = user;
	if (user.sex) {
		sexObj.current = {
			label: sexObj.list.find((v) => v.value == user.sex).label,
			value: user.sex,
		};
	}
});
interface Form {
	id: string;
	avatarUrl: string;
	nickName: string;
	sex: string;
	phone: string;
}
interface Sex {
	show: boolean;
	current: any;
	list: Array<any>;
}
const phoneShow = ref(false);
const phoneForm = reactive({
	phone: '',
	code: '',
});
const sexObj = reactive<Sex>({
	show: false,
	current: {
		label: '',
	},
	list: [
		{
			value: '1',
			label: '男',
		},
		{
			value: '2',
			label: '女',
		},
		{
			value: '0',
			label: '未知',
		},
	],
});
const form = ref<Form>({
	id: '',
	avatarUrl: '',
	nickName: '',
	sex: '',
	phone: '',
});
const codeText = ref();
const uCode = ref();
const codeChange = (text: string) => {
	codeText.value = text;
};
const getCode = () => {
	if (uCode.value.canGetCode) {
		sendSmsCode(phoneForm.phone, 'update').then((res) => {
			uni.showToast({
				title: '验证码已发送',
				icon: 'none',
				duration: 3000,
			});
			// 通知验证码组件内部开始倒计时
			uCode.value.start();
		});
	} else {
		uni.$u.toast('倒计时结束后再发送');
	}
};
const onSex = (arr: any) => {
	const current = arr[0];
	const value = current.value;
	sexObj.current = current;
	form.value.sex = value;
};
const edit = () => {
	if (!form.value.avatarUrl) {
		return uni.$u.toast('请上传头像');
	}
	editObj({
		id: form.value.id,
		sex: form.value.sex,
		nickName: form.value.nickName,
		avatarUrl: form.value.avatarUrl,
	}).then((response) => {
		uni.navigateBack();
	});
};
const logout = () => {
	uni.showModal({
		content: '确认退出系统吗？',
		cancelText: '我再想想',
		success(res) {
			if (res.confirm) {
				storesUserStore.logout().then((response) => {
					// 小程序静默登录
					// #ifdef MP-WEIXIN
					useUserStore().maLogin();
					// #endif
					uni.reLaunch({
						url: '/pages/home/index',
					});
				});
			}
		},
	});
};
const submit = () => {
	editPhone(phoneForm).then((response) => {
		uni.showToast({
			title: '修改成功',
			icon: 'none',
			duration: 3000,
		});
	});
};
</script>

<style lang="scss">
.setting-container {
	padding: 20rpx;

	.setting-warp {
		background-color: #fff;
		border-radius: 10rpx;

		.setting-content {
			padding: 20rpx;
		}
	}
}
.phone-popup {
	padding: 40rpx;
}
</style>
